<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport"
	content="width=device-width,initial-scale=1,user-scalable=no">
<title>Examples</title>
<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath}/repository/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/repository/css/电商样式.css">
<script src="${pageContext.request.contextPath}/repository/bootstrap/js/jquery.min.js"></script>
<script src="${pageContext.request.contextPath}/repository/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript">
    // 轮播图自动播放
    $(function(){
        $('#myCarousel').carousel({
            interval : 2000,
        });
    })
    $(function(){
        $('#downCarousel').carousel({
            interval : 2000,
        });
    })
   $(function(){
        $('#downCarousel1').carousel({
            interval : 2000,
        });
    })

    $(document).ready(function(){
        $("#choose").click(function(){
            $("#choose").modal("hide"),
            $("#register").modal("show")
        })
    })


</script>
</head>
<body>
	<div id="top">
		<nav class="navbar navbar-default " role="navigation">
			<div class="container">
				<!--头部信息 -->
				<div class="navbar-header">
					<button type="button" class="navbar-toggle" data-toggle="collapse"
						data-target=".navbar-ex1-collapse">
						<span class="sr-only"></span> <span class="icon-bar"></span> <span
							class="icon-bar"></span> <span class="icon-bar"></span>
					</button>
					<a class="navbar-brand" href="#">HI!, 欢迎来乐村淘商城</a>
				</div>
				<!-- 菜单信息 -->
				<div class="collapse navbar-collapse navbar-ex1-collapse">
					<ul class="nav navbar-nav navbar-right">
						<li><a href="#" data-toggle="modal" data-target="#choose"><span
								class="glyphicon glyphicon-user"></span> 注册</a></li>
						<li><a href="#" data-toggle="modal" data-target="#login"><span
								class="glyphicon glyphicon-log-in"></span> 登录</a></li>
						<li><a href="#">已买到宝贝</a></li>
						<li><a href="#">我的购物车</a></li>
						<li><a href="#">蜗牛公社</a></li>
					</ul>
				</div>
			</div>
		</nav>
	</div>
	<!-- 模态框（选择） -->
	<div class="modal fade" id="choose" tabindex="-1" role="dialog"
		aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content" style="width:450px" id="mt">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-hidden="true">&times;</button>
					<h4 class="modal-title text-center text-muted" id="myModalLabel">
						选择注册</h4>
				</div>
				<div class="modal-body">
					<a href="#" class="btn btn-default btn-lg" data-toggle="modal"
						style="width: 150px">买家注册</a> <a href="#"
						class="btn btn-default pull-right btn-lg" data-toggle="modal"
						style="width: 150px">卖家注册</a>
				</div>
			</div>
		</div>
	</div>
	<!-- 模态框（注册） -->
	<div class="modal fade" id="register" tabindex="-1" role="dialog"
		aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content" style="width:450px" id="mt">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-hidden="true">&times;</button>
					<h4 class="modal-title text-center text-muted" id="myModalLabel">
						会员注册</h4>
				</div>
				<div class="modal-body">
					<div class="form-group">
						<!-- 用户名输入 -->
						<div class="input-group">
							<span class="input-group-addon"><span
								class="glyphicon glyphicon-user"></span></span> <input type="text"
								name="username" class="form-control">
						</div>

					</div>
					<!-- 密码输入 -->
					<div class="form-group">
						<div class="input-group">
							<span class="input-group-addon"><span
								class="glyphicon glyphicon-lock"></span></span> <input type="password"
								name="password" class="form-control">
						</div>
					</div>
					<!-- 确认密码 -->
					<div class="form-group">
						<div class="input-group">
							<span class="input-group-addon"><span
								class="glyphicon glyphicon-lock"></span></span> <input type="password"
								name="password" class="form-control">
						</div>
					</div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭
					</button>
					<a href="#" class="btn btn-primary">注册</a>
				</div>
			</div>
		</div>
	</div>
	<!-- 模态框（登录） -->
	<div class="modal fade" id="login" tabindex="-1" role="dialog"
		aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content" style="width:450px" id="mt">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-hidden="true">&times;</button>
					<h4 class="modal-title text-center text-muted" id="myModalLabel">
						会员登录</h4>
				</div>
				<div class="modal-body">
					<div class="form-group">
						<!-- 用户名输入 -->
						<div class="input-group">
							<span class="input-group-addon"><span
								class="glyphicon glyphicon-user"></span></span> <input type="text"
								name="username" class="form-control">
						</div>

					</div>
					<!-- 密码输入 -->
					<div class="form-group">
						<div class="input-group">
							<span class="input-group-addon"><span
								class="glyphicon glyphicon-lock"></span></span> <input type="password"
								name="password" class="form-control">
						</div>
					</div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭
					</button>
					<a href="#" class="btn btn-primary">登录</a>
				</div>
			</div>
		</div>
	</div>
	<!-- 搜索框 -->
	<div class="container">
		<div class="row">
			<div class="col-lg-4 col-md-3 col-sm-4 col-xs-3">
				<img src="${pageContext.request.contextPath}/repository/images/logo_03.jpg" class="img-responsive">
			</div>
			<div class="col-lg-6 col-md-7 col-sm-6 col-xs-6 text-center">
				<form class="form-group">
					<div class="input-group">
						<input type="search" name="ss" id="ss" class="form-control"
							placeholder="产品名称/产品编号"> <a href="#"
							class="input-group-addon btn btn-success active">搜搜</a>
					</div>
					<ul class="list-inline text-left">
						<li class="text-muted">热门搜索:</li>
						<li><a href="#" class="text-muted">肌肉</a></li>
						<li><a href="#" class="text-muted">鸭肉</a></li>
						<li><a href="#" class="text-muted">猪肉</a></li>
					</ul>
				</form>
			</div>
			<div class="col-lg-2 col-md-2 col-sm-6 col-xs-2 text-center">
				<button class="btn btn-danger btn-lg" style="width: 150px">购物车</button>
			</div>

		</div>
	</div>
	<!-- 导航栏加下拉列表 -->
	<div class="container">
		<ul class="nav nav-tabs">
			<li class="text-center"><a href="#" id="qb"
				class="btn btn-success dropdown-toggle" data-toggle="dropdown">全部商品分类<span
					class="caret"></span></a>
				<ul class="dropdown-menu" role="menu">
					<li style="width: 198px"><a href="#">功能</a></li>
					<li class="divider"></li>
					<li class="dropdown-submenu"><a href="#">另一个功能</a>
						<ul class="dropdown-menu" id="right">
							<li style="width: 198px"><a href="#">1</a></li>
							<li><a href="#">2</a></li>
							<li><a href="#">3</a></li>
						</ul></li>
					<li class="divider"></li>
					<li><a href="#">其他</a></li>
					<li class="divider"></li>
					<li><a href="#">分离的链接</a></li>
					<li class="divider"></li>
					<li><a href="#">分离的链接</a></li>
					<li class="divider"></li>
					<li><a href="#">分离的链接</a></li>
					<li class="divider"></li>
					<li><a href="#">分离的链接</a></li>
					<li class="divider"></li>
					<li><a href="#">分离的链接</a></li>
					<li class="divider"></li>
					<li><a href="#">分离的链接</a></li>
					<li class="divider"></li>
					<li><a href="#">分离的链接</a></li>
					<li class="divider"></li>
					<li><a href="#">分离的链接</a></li>
				</ul></li>
			<li><a href="#" id="sy" class="btn btn-success">账号登录</a></li>
			<li><a href="#">手机登录</a></li>
			<li><a href="#">账号登录</a></li>
			<li><a href="#">手机登录</a></li>
			<li><a href="#">账号登录</a></li>
			<li><a href="#">手机登录</a></li>
			<li><a href="#">账号登录</a></li>
			<li><a href="#">手机登录</a></li>
		</ul>
	</div>
	<!-- 轮播图片 -->
	<div id="myCarousel" class="carousel slide">
		<!-- 轮播（Carousel）指标 -->
		<ol class="carousel-indicators">
			<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
			<li data-target="#myCarousel" data-slide-to="1"></li>
			<li data-target="#myCarousel" data-slide-to="2"></li>
			<li data-target="#myCarousel" data-slide-to="3"></li>
		</ol>
		<!-- 轮播（Carousel）项目 -->
		<div class="carousel-inner">
			<div class="item active">
				<img src="${pageContext.request.contextPath}/repository/images/测试图1.jpg" alt="First slide"
					style="height: 500px">
			</div>
			<div class="item">
				<img src="${pageContext.request.contextPath}/repository/images/测试图2.jpg" alt="Second slide"
					style="height: 500px">
			</div>
			<div class="item">
				<img src="${pageContext.request.contextPath}/repository/images/测试图3.jpg" alt="Third slide"
					style="height: 500px">
			</div>
			<div class="item">
				<img src="${pageContext.request.contextPath}/repository/images/测试图4.jpg" alt="Four slide" style="height: 500px">
			</div>
		</div>
		<!-- 轮播（Carousel）导航 -->
		<a class="carousel-control left" href="#myCarousel" data-slide="prev">
			<span class="glyphicon glyphicon-chevron-left "></span>
		</a> <a class="carousel-control right" href="#myCarousel"
			data-slide="next"> <span
			class="glyphicon glyphicon-chevron-right "></span>
		</a>
	</div>
	<!-- 促销专场 -->
	<div id="main">
		<div class="container">
			<div class="row">
				<div class="col-md-6">
					<h4 class="text-success">促销专场</h4>
				</div>
				<div class="col-md-6 text-right" style="margin-top: 10px">
					<a href="#" class="text-primary">更多<span
						class="glyphicon glyphicon-chevron-right"></span></a>
				</div>
			</div>
			<div class="row">
				<div class="col-lg-4">
					<a href="#"><img src="${pageContext.request.contextPath}/repository/images/cx.png" class="img-responsive"></a>
				</div>
				<div class="col-lg-4">
					<a href="#"><img src="${pageContext.request.contextPath}/repository/images/ls.png" class="img-responsive"></a>
				</div>
				<div class="col-lg-4">
					<a href="#"><img src="${pageContext.request.contextPath}/repository/images/sg.png" class="img-responsive"></a>
				</div>
			</div>
		</div>
	</div>
	<!-- 休闲美食 -->
	<div class="container">
		<div class="row">
			<div class="col-md-1" style="margin-top: 10px">
				<img src="${pageContext.request.contextPath}/repository/images/shoye_50.png">
			</div>
			<div class="col-md-2">
				<h3 class="text-success">休闲美食</h3>
			</div>
		</div>
		<div class="row">
			<div id="downCarousel" class="carousel slide col-md-3">
				<div class="thumbnail">
					<!-- 轮播（Carousel）指标 -->
					<ol class="carousel-indicators">
						<li data-target="#downCarousel" data-slide-to="0" class="active"></li>
						<li data-target="#downCarousel" data-slide-to="1"></li>
						<li data-target="#downCarousel" data-slide-to="2"></li>
					</ol>
					<!-- 轮播（Carousel）项目 -->
					<div class="carousel-inner">
						<div class="item active">
							<img src="${pageContext.request.contextPath}/repository/images/ms1.jpg" alt="First slide"
								style="height: 470px" class="img-responsive">
						</div>
						<div class="item">
							<img src="${pageContext.request.contextPath}/repository/images/ms2.jpg" alt="Second slide"
								style="height: 470px" class="img-responsive">
						</div>
						<div class="item">
							<img src="${pageContext.request.contextPath}/repository/images/ms3.jpg" alt="Third slide"
								style="height: 470px" class="img-responsive">
						</div>
					</div>
					<!-- 轮播（Carousel）导航 -->
					<a class="carousel-control" href="#downCarousel" data-slide="prev"></a>
					<a class="carousel-control" href="#downCarousel" data-slide="next"></a>
				</div>
			</div>
			<div class="col-md-3">
				<div class="thumbnail">
					<img src="${pageContext.request.contextPath}/repository/images/ms4.jpg" class="img-responsive"
						style="height: 220px">
				</div>
			</div>
			<div class="col-md-3">
				<div class="thumbnail">
					<img src="${pageContext.request.contextPath}/repository/images/ms5.jpg" class="img-responsive"
						style="height: 220px">
				</div>
			</div>
			<div>
				<div class="col-md-3">
					<div class="thumbnail">
						<img src="${pageContext.request.contextPath}/repository/images/ms6.jpg" class="img-responsive"
							style="height:220px">
					</div>
				</div>
			</div>
			<div class="col-md-3">
				<div class="thumbnail">
					<img src="${pageContext.request.contextPath}/repository/images/ms7.jpg" class="img-responsive"
						style="height: 220px">
				</div>
			</div>
			<div class="col-md-3">
				<div class="thumbnail">
					<img src="${pageContext.request.contextPath}/repository/images/ms8.jpg" class="img-responsive"
						style="height: 220px">
				</div>
			</div>
			<div class="col-md-3">
				<div class="thumbnail">
					<img src="${pageContext.request.contextPath}/repository/images/ms9.jpg" class="img-responsive"
						style="height:
            220px">
				</div>
			</div>
		</div>
	</div>
	<!-- 横条 -->
	<div class="container">
		<div class="thumbnail">
			<img src="${pageContext.request.contextPath}/repository/images/ms10.jpg">
		</div>
	</div>
	<!-- 茶道 -->
	<div class="container">
		<div class="row">
			<div class="col-md-1" style="margin-top: 10px">
				<img src="${pageContext.request.contextPath}/repository/images/shoye_65.png.png">
			</div>
			<div class="col-md-2">
				<h3 class="text-success">雅安藏茶</h3>
			</div>
		</div>
		<div class="row">
			<div id="downCarousel1" class="carousel slide col-md-3">
				<div class="thumbnail">
					<!-- 轮播（Carousel）指标 -->
					<ol class="carousel-indicators">
						<li data-target="#downCarousel1" data-slide-to="0" class="active"></li>
						<li data-target="#downCarousel1" data-slide-to="1"></li>
						<li data-target="#downCarousel1" data-slide-to="2"></li>
					</ol>
					<!-- 轮播（Carousel）项目 -->
					<div class="carousel-inner">
						<div class="item active">
							<img src="${pageContext.request.contextPath}/repository/images/20160318f277291eef7f4b66aeaddd6e02d13197.jpg"
								alt="First slide" style="height: 470px" class="img-responsive">
						</div>
						<div class="item">
							<img src="${pageContext.request.contextPath}/repository/images/201603218f69dcabea284d2d8ecf0608e1fa9446.jpg"
								alt="Second slide" style="height: 470px" class="img-responsive">
						</div>
						<div class="item">
							<img src="${pageContext.request.contextPath}/repository/images/201603166eb784d965a14b51ad4d67821968ab0e.jpg"
								alt="Third slide" style="height: 470px" class="img-responsive">
						</div>
					</div>
					<!-- 轮播（Carousel）导航 -->
					<a class="carousel-control" href="#downCarousel1" data-slide="prev"></a>
					<a class="carousel-control" href="#downCarousel1" data-slide="next"></a>
				</div>
			</div>
			<div class="col-md-3">
				<div class="thumbnail">
					<img src="${pageContext.request.contextPath}/repository/images/2016031700192e6832f84beda5ab86b9a59792c3.jpg"
						class="img-responsive" style="height: 220px">
				</div>
			</div>
			<div class="col-md-3">
				<div class="thumbnail">
					<img src="${pageContext.request.contextPath}/repository/images/201603173bad02b276184622925901d01dca61af.jpg"
						class="img-responsive" style="height: 220px">
				</div>
			</div>
			<div>
				<div class="col-md-3">
					<div class="thumbnail">
						<img src="${pageContext.request.contextPath}/repository/images/20160317bb0652ab0d66488193b4ae37812c9f6a.jpg"
							class="img-responsive" style="height: 220px">
					</div>
				</div>
			</div>
			<div class="col-md-3">
				<div class="thumbnail">
					<img src="${pageContext.request.contextPath}/repository/images/20160317f4ea27e46f68412dba93c9e814a0c116.jpg"
						class="img-responsive" style="height: 220px">
				</div>
			</div>
			<div class="col-md-3">
				<div class="thumbnail">
					<img src="${pageContext.request.contextPath}/repository/images/20160317f7f198837e494170a08f1a46520b0b5e.jpg"
						class="img-responsive" style="height: 220px">
				</div>
			</div>
			<div class="col-md-3">
				<div class="thumbnail">
					<img src="${pageContext.request.contextPath}/repository/images/20160317dd5901bf3bd040f88623231aa912ff08.jpg"
						class="img-responsive" style="height: 220px">
				</div>
			</div>
		</div>
	</div>
	<!-- 横条 -->
	<div class="container">
		<div class="thumbnail">
			<img src="${pageContext.request.contextPath}/repository/images/20160826f4e0f87c6028413e9a905e5cc7c1d46d.jpg">
		</div>
	</div>
</body>
</html>